<template>
    <div class="content">
      <div>
        <ul>
          <!--ul>li{辣条$}*5  -->
          <li v-for="(item,index) in latiao"
              :key="item"
              :class="{latiaostyle:latiaoCurrentIndex===index}"
              @click="latiaoclick(index)">{{item}}</li>
        </ul>
      </div>
      <div style="margin-top: 60px">>>>>>></div>
      <div>
        <ul>
          <li v-for="(item,index) in cole"
              :key="item"
              :class="{colestyle:coleCurrentIndex===index}"
              @click="coleclick(index)">{{item}}</li>
        </ul>
      </div>
      <div style="margin-top: 60px">>>>>>></div>
      <div>
        <ul>
          <li v-for="(item,index) in shutiao"
              :key="item"
              :class="{shutiaostyle:shutiaoCurrentIndex===index}"
              @click="shutiaoclick(index)" >{{item}}</li>
        </ul>
      </div>

      <div>
       <h2>
         你选择的食品是:
         {{latiao[latiaoCurrentIndex]}}>{{cole[coleCurrentIndex]}}>{{shutiao[shutiaoCurrentIndex]}}
       </h2>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data(){
          return{
            latiao:['辣条1','辣条2','辣条3','辣条4','辣条5'],
            latiaoCurrentIndex:0,
            cole:['可乐1','可乐2','可乐3','可乐4','可乐5'],
            coleCurrentIndex:0,
            shutiao:['薯条1','薯条2','薯条3','薯条4','薯条5'],
            shutiaoCurrentIndex:0,
            coleclickable:false,
            shutiaoclickable:false
          }
        },
      methods:{
        latiaoclick(index){
            this.latiaoCurrentIndex =index
        },
        coleclick(index){
          if ( this.coleclickable)
          this.coleCurrentIndex =index
        },
        shutiaoclick(index){
          if (this.shutiaoclickable)
          this.shutiaoCurrentIndex =index
        }
      },
      watch:{
        latiaoCurrentIndex(newvalue,oldvalue){
          this.coleclickable = true
        },
       coleCurrentIndex(newvalue,oldvalue){
          this.shutiaoclickable = true
        }
      },
      destroyed() {
          console.log('销毁了嘛')
      }

    }
</script>

<style scoped>
  .content{
    width: 600px;
    height: 300px;
    border: 1px dotted;
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .latiaostyle{
    color: red;
  }
  .colestyle{
    color: red;
  }
  .shutiaostyle{
    color: red;
  }
  ul>li{
    list-style: none;
    /*background-color: #409EFF;*/
    border: 1px solid;
    padding: 5px;
    /*background-color: blue;*/
  }
</style>
